<template>
	<div>
		
		<div class="smp-search smp_panel">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">工单受理</div>
			</div>
			<div class="smp_panel_body">
				
		<processBase :row="row"></processBase>
		<div class="innerTabs">
			<el-tabs>
				<el-tab-pane label="工单信息">
					<processDetails ref="processDetails" :row="row"></processDetails>
					
					<div class="smp-result smp_panel_1">
						<div class="smp_panel_header">
							<div class="smp_panel_pre"></div>
							<div class="smp_panel_title">流程审批</div>
							<div class="smp-panel_option">
							</div>
						</div>
					<div class="smp_panel_body">
						<el-form :inline="false" label-width="85px" size="mini"  ref="form" :model="form" :rules="rules">
							<el-row :gutter="24">
								<!-- <el-col :span="8" style="text-align: left;">
									<el-form-item label="处理结果:" prop="resultType" >
										
										<el-radio-group v-model="resultType">
											<el-radio label="01">受理</el-radio>
											<el-radio label="02">转派</el-radio>
										</el-radio-group>
									</el-form-item>
								</el-col> -->
								
								
									<el-col :span="24">
										<el-form-item label="处理意见:" prop="resultMessage" >
											<el-input v-model="form.resultMessage" type="textarea"></el-input>
										</el-form-item>
									</el-col>
									
								<!-- 	<el-col :span="8" v-if="resultType=='02'" >
										<el-form-item label="开发人员:" prop="developmentUserId" >
											
											<el-select v-model="form.developmentUserId" style="width: 100%"
												placeholder="开发人员" >
												<el-option v-for="item in devUserList" :key="item.userName" :label="item.userChineseName"
													:value="item.userName">
													<span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
													<span style="float: right;margin-right: 3px;">{{ item.orgName }}</span>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col> -->
									
									<!-- <el-col :span="16" v-if="resultType=='02'">
										<el-form-item label="开发人员:" prop="developmentUserId" >
											
											<el-select v-model="form2.developmentUserId" style="width: 100%"
												placeholder="开发人员" >
												<el-option v-for="item in devUserList" :key="item.userName" :label="item.userChineseName"
													:value="item.userName">
													<span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
													<span style="float: right;margin-right: 3px;">{{ item.department }}</span>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col> -->
									<el-col :span="24">
										<el-form-item style="text-align: center;">
											<el-button   size="mini" type="primary" plain
												@click="onSubmit">
												<i class="el-icon-check"></i>
												受&nbsp;&nbsp;理</el-button>
											 <el-button  size="mini"  
												@click="onReject">
												<i class="el-icon-close"></i>
												拒绝</el-button> 
										</el-form-item>
									</el-col> 
							
							</el-row>
						</el-form>
					</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="流程信息">
					<processView :row="row"></processView>
				</el-tab-pane>
				<!-- <el-tab-pane label="工单受理">
					<div class="smp-search">
						<el-form :inline="false" label-width="100px" size="mini" ref="form1" :model="form1" :rules="rules1">

							<el-row>
								<el-col :span="24">
									<el-col :span="24">
										<el-form-item label="处理意见:" prop="resultMessage" >
											<el-input v-model="form1.resultMessage" type="textarea"></el-input>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item style="text-align: center;">
											<el-button size="mini" type="success" style="width: 150px;"
												@click="onSubmit">受理</el-button>
										</el-form-item>
									</el-col>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-tab-pane>
				<el-tab-pane label="工单转派">
					<div class="smp-search">
						<el-form :inline="false" label-width="100px" size="mini" ref="form2" :model="form2" :rules="rules2">
				
							<el-row>
								<el-col :span="24">
									<el-col :span="24">
										<el-form-item label="处理意见:" prop="resultMessage" >
											<el-input v-model="form2.resultMessage" type="textarea"></el-input>
										</el-form-item>
									</el-col>
									
									<el-col :span="16">
										<el-form-item label="开发人员:" prop="developmentUserId" >
											
											<el-select v-model="form2.developmentUserId" style="width: 100%"
												placeholder="开发人员" >
												<el-option v-for="item in devUserList" :key="item.userName" :label="item.userChineseName"
													:value="item.userName">
													<span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
													<span style="float: right;margin-right: 3px;">{{ item.department }}</span>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="8">
										<el-form-item style="text-align: center;">
											<el-button size="mini" type="success" style="width: 150px;"
												@click="onReject">转派</el-button>
										</el-form-item>
									</el-col>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-tab-pane>
				 -->
			</el-tabs>
		</div>
	
		</div>
		</div>
		
	</div>
</template>

<script>
	"use strict";
	import {
		acceptDemand,acceptReassignment,examine
	} from '@/api/process.js';
	import {
		selectByRoleId
	} from '@/api/user.js';
	import processBase from '../processCommon/processBase.vue'
	import processView from '../processCommon/processView.vue'
	import processDetails from '../processCommon/processDetails.vue';
	export default {
		data() {
			return {
				devUserList:[],
				row: {},
				form: {
					applyId:'',
					taskId:'',
					developmentUserId: "",
					status: "",
					resultCode: "",
					resultMessage: "同意",
				},
				resultType:'01',
				/* form1: {
					resultMessage: "",
				},
				form2: {
					developmentUserId: "",
					resultMessage: "",
				}, */
				rules: {
					resultMessage: [{
						required: true,
						message: "处理意见不能为空",
						trigger: ['blur', 'change']
					}],
					developmentUserId: [{
						required: true,
						message: "开发人员不能为空",
						trigger: ['blur', 'change']
					}]
				},
			};
		},
		created() {
		
			this.row = this.$route.query;
			this.form.taskId = this.row.taskId;
			this.form.applyId=this.row.sid
			//this.getNum();
			this.getDevUserList();
		},
		components: {
			processBase,
			processView,
			processDetails
		},
		methods: {
			
			getDevUserList(){
				selectByRoleId({"roleId":"1004"}).then(response => {
								if(response.data.code == "0000"){
									
									this.devUserList = response.data.extend;
								}else{
									this.$message.error(response.data.message);
								}
								});
							
			},
			/**
			 * 受理
			 */
			onSubmit() {
				
				this.$refs["form"].validate(valid => {
					if (valid) {
						//this.form.resultMessage=this.form2.resultMessage;
						acceptDemand(this.form).then(response => {
								if(response.data.code == "0000"){
									this.$message.success(response.data.message);
								}else{
									this.$message.error(response.data.message);
								}
								
								this.$store.dispatch("updateTaskNum").then(()=>{
									let panel = {key:this.$route.path};
									  this.$store.dispatch('removePanel', panel).then(()=>{
									this.$router.push({name:'mytask',query:{}})
									});
								})
								
							}).catch(error => {
								this.$message.error(error.message);
							});
					}
				});
				
				
			},
			
			//转派
		/* 	onReject() {
				
				this.$refs["form"].validate(valid => {
					if (valid) {
						//this.form.resultMessage=this.form2.resultMessage;
						//this.form.developmentUserId=this.form2.developmentUserId;
						acceptReassignment(this.form).then(response => {
								if(response.data.code == "0000"){
									this.$message.success(response.data.message);
								}else{
									this.$message.error(response.data.message);
								}
								
								this.$store.dispatch("updateTaskNum").then(()=>{
									let panel = {key:this.$route.path};
									 this.$store.dispatch('removePanel', panel)
									this.$router.push({name:'mytask',query:{}})
								})
								
							}).catch(error => {
								this.$message.error(error.message);
							});
					}
				});
			} */
			
			onReject() {
				this.$refs["form"].validate(valid => {
					if (valid) {
				this.form.status="9";
				examine(this.form).then(response => {
						if(response.data.code == "0000"){
							this.$message.success(response.data.message);
							this.$store.dispatch("updateTaskNum").then(()=>{
								let panel = {key:this.$route.path};
								  this.$store.dispatch('removePanel', panel).then(()=>{
								this.$router.push({name:'mytask',query:{}})
								})
							})
						}else{
							this.$message.error(response.data.message);
						}
					}).catch(error => {
						this.$message.error(error.message);
					});
					}
					});
			}
		}
	};
</script>

<style scoped>
	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 20px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}

	.serviceInfo1 {
		margin-left: 20px;
	}

	.serviceInfo {
		text-align: left;
		margin-left: 40px;
	}

	.serviceInfo span {
		line-height: 30px;
		text-align: left;
		color: #606266;
		font-size: 14px;
	}

	.el-divider--horizontal {
		margin: 12px 0;
		;
	}
	.smp-result{
		text-align: left;
		margin-left: 0px;
	}
</style>
